import React from "react";
import PropTypes from 'prop-types';
import {
    Comment, Avatar, Form, Button, List, Input, Tag, Tooltip, Rate, PageHeader, message
} from 'antd';
import {PlusOutlined} from '@ant-design/icons';
import {TweenOneGroup} from 'rc-tween-one';
import {CommentService} from "../eosjs/EosService";
import moment from 'moment';

const {TextArea} = Input;
const desc = ['1星差评', '2星中评', '3星中评', '4星中评', '5星好评'];

class EditComment extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            tags: ['好吃', '便宜', '服务好'],
            inputVisible: false,
            inputValue: '',
            value: [5, 4, 3, 2],
            content: "",
            shopId: this.props.location.state.shopId,
            replyId: this.props.location.state.replyId,
            editMode: this.props.location.state.editMode, //创建评论或更新评论(create/update)
        };
    }

    handleChange = (value, idx) => {
        let tempValue = this.state.value;
        console.log(value, idx)
        tempValue[value] = idx;
        console.log(tempValue)
        this.setState({
            value: tempValue
        });
    };
    handleClose = removedTag => {
        const tags = this.state.tags.filter(tag => tag !== removedTag);
        console.log(tags);
        this.setState({tags});
    };

    showInput = () => {
        this.setState({inputVisible: true}, () => this.input.focus());
    };

    handleInputChange = e => {
        this.setState({inputValue: e.target.value});
    };

    handleInputConfirm = () => {
        const {inputValue} = this.state;
        let {tags} = this.state;
        if (inputValue && tags.indexOf(inputValue) === -1) {
            tags = [...tags, inputValue];
        }
        console.log(tags);
        this.setState({
            tags,
            inputVisible: false,
            inputValue: '',
        });
    };

    saveInputRef = input => (this.input = input);

    forMap = tag => {
        const tagElem = (
            <Tag
                closable
                onClose={e => {
                    e.preventDefault();
                    this.handleClose(tag);
                }}
            >
                {tag}
            </Tag>
        );
        return (
            <span key={tag} style={{display: 'inline-block'}}>
        {tagElem}
      </span>
        );
    };

    render() {
        const {tags, inputVisible, inputValue} = this.state;
        const tagChild = tags.map(this.forMap);
        const {value} = this.state;
        let rate = null;
        let tagsLabel = null;
        let createNewLabel = null;
        let writeNewLabel = null

        if (this.state.replyId === 0) {
            rate = (<span style={{marginLeft: 6, fontSize: 18}}>
                    总体评价：<Rate tooltips={desc} onChange={this.handleChange.bind(this, 0)} value={value[0]}/>
                {value[0] ? <span className="ant-rate-text">{desc[value[0] - 1]}</span> : ''}
                </span>);
            tagsLabel = (<div style={{marginTop: 10, marginBottom: 5, marginLeft: 5}}>
                <TweenOneGroup
                    enter={{
                        scale: 0.8,
                        opacity: 0,
                        type: 'from',
                        duration: 100,
                        onComplete: e => {
                            e.target.style = '';
                        },
                    }}
                    leave={{opacity: 0, width: 0, scale: 0, duration: 200}}
                    appear={false}
                >
                    {tagChild}
                </TweenOneGroup>
            </div>);
            createNewLabel = (inputVisible && (
                <Input
                    ref={this.saveInputRef}
                    type="text"
                    size="small"
                    style={{width: 78}}
                    value={inputValue}
                    onChange={this.handleInputChange}
                    onBlur={this.handleInputConfirm}
                    onPressEnter={this.handleInputConfirm}
                />
            ));
            writeNewLabel = (!inputVisible && (
                <Tag onClick={this.showInput} className="site-tag-plus" style={{marginLeft: 5}}>
                    <PlusOutlined/> 添加新标签
                </Tag>
            ));
        }
        return (
            <div className="editComment">
                <PageHeader
                    className="site-page-header"
                    onBack={() => this.props.history.go(-1)}

                    title="评论"
                    // subTitle="This is a subtitle"
                />
                {rate}
                <br/>
                {/*<span>*/}
                {/*    口味评价：<Rate tooltips={desc} onChange={this.handleChange.bind(this, 1)} value={value[1]}/> {value[1] ? <span className="ant-rate-text">{desc[value[1] - 1]}</span> : ''}*/}
                {/*</span>*/}
                {/*<br/>*/}
                {/*<span>*/}
                {/*    环境评价：<Rate tooltips={desc} onChange={this.handleChange.bind(this, 2)} value={value[2]}/> {value[2] ? <span className="ant-rate-text">{desc[value[2] - 1]}</span> : ''}*/}
                {/*</span>*/}
                {/*<br/>*/}
                {/*<span>*/}
                {/*    服务评价：<Rate tooltips={desc} onChange={this.handleChange.bind(this, 3)} value={value[3]}/> {value[3] ? <span className="ant-rate-text">{desc[value[3] - 1]}</span> : ''}*/}
                {/*</span>*/}
                {tagsLabel}
                {createNewLabel}
                {writeNewLabel}
                <TextArea onChange={this.textAreaChange}
                          style={{marginTop: 10, marginBottom: 10, height: 300}}></TextArea>
                <Button type="primary" style={{marginLeft: 5}} onClick={this.commitComment}>添加评论</Button>
            </div>
        );
    }

    textAreaChange = (e) => {
        this.setState({
            content: e.target.value
        })
        // console.log(e.target.value)
    }
    commitComment = () => {

        let contentJson = {text: this.state.content};
        if (this.state.replyId === 0) {
            contentJson = {text: this.state.content, tags: this.state.tags, rate: this.state.value[0]};
        }
        if (this.state.editMode === "create") {
            CommentService.insertComment(this.state.shopId, JSON.stringify(contentJson), this.state.replyId).then(res => {
                console.log(res);
                if (res.status === true) {
                    message.success("评论成功！");
                    this.props.history.go(-1);
                } else {
                    message.error("评论失败！");
                }
            });
        } else if (this.state.editMode === "update") {
            // CommentService.updateComment(this.state.shopId,)
            CommentService.updateComment(this.state.shopId, this.props.location.state.cid, JSON.stringify(contentJson)).then(res => {
                console.log(this.props.location.state.cid, JSON.stringify(contentJson), this.state.shopId)
                if (res.status === true) {
                    console.log(res)
                    message.success("评论修改成功！");
                    this.props.history.go(-1);
                } else {
                    message.error("评论修改失败！");
                }
            })
        }


    }
}

EditComment.propTypes = {};

export default EditComment;